// 页脚组件
import { navigateTo } from '../router/index.js';

function Footer() {
  const footer = document.createElement('footer');
  footer.className = 'bg-gray-900 text-white py-12';
  
  // 页脚内容
  footer.innerHTML = `
    <div class="container mx-auto px-4 md:px-8">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
        <!-- 关于MSRM3 -->
        <div>
          <h3 class="text-xl font-bold mb-4 text-primary">关于MSRM3</h3>
          <p class="text-gray-400 mb-4">
            MSRM3是一款轻量级、高性能的网络管理工具，基于.NET 9 AOT技术打造，提供跨平台、单文件部署的智能网管解决方案。
          </p>
          <div class="flex space-x-4">
            <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
              <i class="fa fa-github text-xl"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
              <i class="fa fa-twitter text-xl"></i>
            </a>
            <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">
              <i class="fa fa-envelope text-xl"></i>
            </a>
          </div>
        </div>
        
        <!-- 快速链接 -->
        <div>
          <h3 class="text-xl font-bold mb-4 text-primary">快速链接</h3>
          <ul class="space-y-2">
            <li><button class="footer-link" data-target="/">首页</button></li>
            <li><button class="footer-link" data-target="/features">功能模块</button></li>
            <li><button class="footer-link" data-target="/usecases">场景解决方案</button></li>
            <li><button class="footer-link" data-target="/technology">技术架构</button></li>
            <li><button class="footer-link" data-target="/changelog">更新日志</button></li>
            <li><button class="footer-link" data-target="/download">下载中心</button></li>
          </ul>
        </div>
        
        <!-- 技术支持 -->
        <div>
          <h3 class="text-xl font-bold mb-4 text-primary">技术支持</h3>
          <ul class="space-y-2">
            <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">使用文档</a></li>
            <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">常见问题</a></li>
            <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">反馈建议</a></li>
            <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-200">加入社区</a></li>
          </ul>
        </div>
        
        <!-- 订阅更新 -->
        <div>
          <h3 class="text-xl font-bold mb-4 text-primary">订阅更新</h3>
          <p class="text-gray-400 mb-4">
            订阅我们的更新，获取最新版本信息和技术动态
          </p>
          <div class="flex">
            <input type="email" placeholder="您的邮箱地址" class="px-4 py-2 rounded-l-lg w-full focus:outline-none focus:ring-2 focus:ring-primary text-gray-800">
            <button class="bg-primary hover:bg-primary-dark px-4 py-2 rounded-r-lg transition-colors duration-200">
              <i class="fa fa-paper-plane"></i>
            </button>
          </div>
        </div>
      </div>
      
      <!-- 版权信息 -->
      <div class="pt-8 border-t border-gray-800 text-center text-gray-500">
        <p>&copy; ${new Date().getFullYear()} MSRM3 团队. 保留所有权利.</p>
        <div class="flex justify-center space-x-4 mt-4">
          <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">隐私政策</a>
          <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">使用条款</a>
          <a href="#" class="text-gray-500 hover:text-primary transition-colors duration-200">联系我们</a>
        </div>
      </div>
    </div>
  `;
  
  // 添加导航事件监听
  footer.querySelectorAll('.footer-link').forEach(link => {
    link.addEventListener('click', () => {
      const target = link.getAttribute('data-target');
      navigateTo(target);
    });
  });
  
  return footer;
}

export default Footer;